import React, {Component} from 'react'
import {withRouter} from 'react-router'
import ReactHighcharts from 'react-highcharts'
import {chartConfig, pieConfig, columnConfig} from './ConfigGraph'
import DatePicker from 'react-mobile-datepicker'
import {connect} from 'react-redux'
import Loading from './Loading'
import {fetch, formatDate, formatDateTime} from '../util'
import HighChartsPipeComponent from './HighChartsPipeComponent'
import HighChartsColumnComponent from './HighChartsColumnComponent'
import  HighChartsChartComponent from './HighChartsChartComponent'
import Header from './Header'
import '../../../lib/styles/app.less'
import RCDatetime from 'react-datetime'
import 'react-datetime/css/react-datetime.css'


@connect(
  state=> {
    return {
      chart: state.chart
    }
  }
)

@withRouter
export default  class ReportGraphModule extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    let id = this.props.location.query.id
    console.info(id)
    this.props.dispatch({
      type: 'chart/fetchGraphSql',
      modId: id
    })
  }
  componentWillUnmount(){
    this.props.dispatch({
      type: 'chart/cleanState',
      obj:''
    })
  }

  render() {
    const {chart}=this.props
    console.info(chart)
    return (
      <div>
        <Header title="图表"/>
        <div className="mui-content">
          <div className="red-date-wrap">
            <RCDatetime
              timeFormat="HH:mm:ss"
              locale="zh-CN"
              inputProps={
              {
                placeholder: '选择时间'
              }
              }
              onBlur={this.handleChangeDate}/>
          </div>
          {chart.chartObj.map((item, index)=>
            this.getTypeHighChart(item, index)
          )}
        </div>

      </div>)
  }

  getTypeHighChart = (item, index)=> {
    let element
    if (item.type == 'line') {
      element = (<HighChartsChartComponent handleNextReport={this.handleNextReport}  handlePreReport={this.handlePreReport}
                                           prevReport={item.prevReport} nextReport={item.nextReport} needDateState={item.needDateState} needDatetime={item.needDatetime} isNon={item.isNon} isLoading={item.isLoading} subtitle={item.subtitle} title={item.title} key={index} scales={item.scales} series={item.scaleContainer}/>)
    }
    if (item.type == 'column') {
      element = (<HighChartsColumnComponent handleNextReport={this.handleNextReport}  handlePreReport={this.handlePreReport}
        prevReport={item.prevReport} nextReport={item.nextReport} needDateState={item.needDateState} isNon={item.isNon} isLoading={item.isLoading} key={index} subtitle={item.subtitle} title={item.title} scales={item.scales}
                                            series={item.scaleContainer}/>)
    }
    if (item.type == 'pie') {
      element = (<HighChartsPipeComponent handleNextReport={this.handleNextReport}  handlePreReport={this.handlePreReport}
        prevReport={item.prevReport} nextReport={item.nextReport}  needDateState={item.needDateState} needDatetime={item.needDatetime} isNon={item.isNon}
                                          isLoading={item.isLoading} title={item.title} key={index} series={item.pieScales}/>)
    }
    return element
  }

  //时间选择完毕之后调用此方法
  handleChangeDate = (moment) => {
    let id = this.props.location.query.id
    if (moment == '') return;
    let time = moment.format('YYYY-MM-DD HH:mm:ss')
    this.props.dispatch({
      type: 'chart/changeDateTime',
      dateTime: time,
      chartObj:this.props.chart.chartObj
    })
  }

  //展示下一报表
  handleNextReport=(id)=>{
    this.props.dispatch({
      type: 'chart/cleanState',
      obj:''
    })
    this.props.dispatch({
      type: 'chart/fetchGraphSql',
      modId: id
    })

  }
  //展示上一条报表
  handlePreReport=(id)=>{
    this.props.dispatch({
      type: 'chart/cleanState',
      obj:''
    })
    this.props.dispatch({
      type: 'chart/fetchGraphSql',
      modId: id
    })

  }
}